<!doctype html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="1.0">
    <meta name="author" content="程慧敏、陈卓">
    <title>OpenBlock-Sample</title>

    <!-- Bootstrap core CSS -->
    <link href="static/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="static/css/bootstrap-icons.css">
    <script src="static/js/jquery.min.js"></script>

    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        
        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
        
        .large-header {
            /* background: url(static/images/apic26689.jpg); */
            /*position: fixed;*/
            width: 100%;
            background-size: cover;
            background-position: 50% 50%;
            top: 0px;
            bottom: 0px;
            right: 0px;
            left: 0px;
            background-repeat: no-repeat;
            z-index: 10;
            text-align: center;
        }
    </style>
    <script>
        function openProject(projPath) {
            let IDE_PATH = '../openblock/';
            if (projPath.endsWith('json')) {
                let url =
                    IDE_PATH +
                    'frontpage/index.html#%7B%22proj%22:%22/testing/' +
                    projPath +
                    '%22%7D'
                window.open(url);
            } else if (projPath.endsWith('.zip') || projPath.endsWith('.obp')) {
                let url =
                    IDE_PATH +
                    'frontpage/index.html#%7B%22srczip%22:%22/testing/' +
                    projPath +
                    '%22%7D'
                window.open(url);
            }
        }

        function makeURL(projPath) {
            let IDE_PATH = '../openblock/';
            if (projPath.endsWith('.json')) {
                let url =
                    IDE_PATH +
                    'frontpage/index.html#%7B%22proj%22:%22/testing/' +
                    projPath +
                    '%22%7D'
                return (url);
            } else if (projPath.endsWith('.zip') || projPath.endsWith('.obp')) {
                let url =
                    IDE_PATH +
                    'frontpage/index.html#%7B%22srczip%22:%22/testing/' +
                    projPath +
                    '%22%7D'
                return (url); 
            }
        }
        $(document).ready(function() {
            var txt = [
            {
                 "name":"电子相框",
                 "url":"canvas/电子相框.obp",
                 "img":"canvas/电子相框.jpg"
            },
            {
                 "name":"种族隔离推演模型",
                 "url":"canvas/种族隔离模型.obp",
                 "img":"canvas/种族隔离模型.png"
            },
            {
                 "name":"涂鸦",
                 "url":"graffiti/涂鸦.obp",
                 "img":"graffiti/涂鸦.png"
            },
            {
                 "name":"向量",
                 "url":"vector/向量.obp",
                 "img":"vector/vector.png"
            },
            {
                 "name":"helloworld",
                 "url":"helloworld/helloworld.obp",
                 "img":"helloworld/helloworld.png"
            }, 
               {"name":"时钟",
                "url":"canvas/时钟.obp",
                "img":"canvas/时钟.jpg"
            }, 
               {"name":"电子木鱼",
                "url":"canvas/woodfish/电子木鱼.obp",
                "img":"canvas/woodfish/woodfish.jpg"
            }, {
                "name": "消息只读性测试",
                "url": "消息只读性测试.obp"
            }, {
                "name": "窗口操作",
                "url": "窗口操作.obp"
            }, {
                "name": "询问和回答",
                "url": "询问和回答.obp"
            }, {
                "name": "文件操作测试",
                "url": "文件操作测试.obp"
            }, {
                "name": "动物园（三消游戏）",
                "url": "game/动物园.obp",
                "img": "game/动物园.png"
            }, {
                "name": "使用列表",
                "url": "struct/使用列表.obp",
            }, {
                "name": "输入框",
                "url": "canvas/输入框.obp",
            }, {
                "name": "随机坠落",
                "url": "canvas/随机坠落.obp",
                "img": "canvas/随机坠落.png"
            }, {
                "name": "客户和服务模型",
                "url": "network/客户和服务模型.obp",
                "img": "network/客户和服务模型.png"
            }, {
                "name": "学生信息展示",
                "url": "dataset/学生信息展示.obp",
                "img": "dataset/学生信息展示.png"
            }, {
                "name": "延迟回音",
                "url": "audio/web录音测试.obp",
            }, {
                "name": "计算器",
                "url": "canvas/计算器.obp",
                "img": "canvas/计算器.jpg"
            }, {
                "name": "保存和恢复状态",
                "url": "保存和恢复状态.obp",
            }, {
                "name": "插入排序原理展示",
                "url": "canvas/插入排序原理展示.obp",
                "img": "canvas/插入排序原理展示.png"
            }, {
                "name": "简单移动",
                "url": "canvas/简单移动.obp"
            }, {
                "name": "打开本地音频",
                "url": "audio/加载音频.obp"
            }, {
                "name": "打开本地图片",
                "url": "canvas/打开图片.obp"
            }, {
                "name": "2D空间音效",
                "url": "audio/2D空间音效.obp",
                "img": "audio/2D空间音效.jpg"
            }, {
                "name": "飞机大战",
                "url": "canvas/飞机大战.obp",
                "img": "canvas/飞机大战.jpg"
            }, {
                "name": "第一视角驾驶",
                "url": "canvas/第一视角驾驶.obp",
                "img": "canvas/第一视角驾驶.jpg"
            }, {
                "name": "操作坦克",
                "url": "canvas/操作坦克.obp",
                "img": "canvas/操作坦克.jpg"
            }, {
                "name": "瞄准镜",
                "url": "canvas/瞄准镜.obp",
                "img": "canvas/瞄准镜.jpg"
            }, {
                "name": "抗疫宣誓",
                "url": "UI/抗疫宣誓/抗疫宣誓.obp",
                "img": "UI/抗疫宣誓/image.png"
            }, {
                "name": "太极",
                "url": "canvas/太极.obp",
                "img": "canvas/太极.png"
            }, {
                "name": "碰撞计算",
                "url": "canvas/碰撞计算.obp"
            }, {
                "name": "连线",
                "url": "canvas/连线样例.obp"
            }, {
                "name": "选择题",
                "url": "UI/选择题/project.json",
                "img": "UI/选择题/选择题.png"
            }, {
                "name": "打地鼠",
                "url": "canvas/打地鼠/project.json",
                "img": "static/images/dds.png"
            }, {
                "name": "打地鼠2",
                "url": "canvas/打地鼠2.obp",
                "img": "static/images/dds.png"
            }, {
                "name": "气候变化",
                "url": "canvas/气候变化可视化/project.json",
                "img": "static/images/qhbh.png"
            }, {
                "name": "绘制图片",
                "url": "canvas/蹦蹦吹牛/project.json",
                "img": "static/images/20220427-1445.png"
            }, {
                "name": "可视化数据",
                "url": "canvas/life-expectancy/project.json",
                // "img": "static/images/20220427-1446.png"
            }, {
                "name": "人生重启模拟器",
                "url": "canvas/lifeRestart/人生重启模拟器.obp",
                "img": "static/images/lifeRestart.jpg"
            }, {
                "url": "network/协作画板.obp",
                "name": "协作画板",
                "img": "static/images/20220427-1444.png"
            }, {
                "name": "越障游戏",
                "url": "canvas/bird/project.json",
                "img": "static/images/bird.png"
            }, {
                "name": "123木头人",
                "url": "123woodenboy/123woodenboy.json",
                "img": "static/images/123woodenboy.png"
            }, {
                "name": "过马路",
                "url": "cross/cross.json",
                "img": "static/images/20220427-1447.png"
            }, {
                "url": "canvas/反应游戏/project.json",
                "name": "反应游戏",
                "img": "static/images/20220427-1449.png"
            }, {
                "url": "canvas/stream/project.json",
                "name": "字符串流处理"
            }, {
                "url": "canvas/透明度和帧绘制.json",
                "name": "透明度和帧绘制"
            }, {
                "url": "text.json",
                "name": "文本合成"
            }, {
                "url": "canvas/lineAndStroke/project.json",
                "name": "直线和描边"
            }, {
                "url": "fsm-door.json",
                "name": "门的状态切换",
                "img": "static/images/20220427-1451.png"
            }, {
                "url": "text_join/project.json",
                "name": "文本连接"
            }, {
                "url": "canvas/chart/project.json",
                "name": "柱状图",
                "img": "static/images/20220427-1456.png"
            }, {
                "url": "canvas/Canvas坐标.json",
                "name": "canvas坐标"
            }, {
                "url": "function.json",
                "name": "函数样例"
            }, {
                "url": "函数调用.json",
                "name": "函数样例二"
            }, {
                "url": "canvas/fillRect/colorRect.json",
                "name": "矩形和文字"
            }, {
                "url": "delayPrint/project.json",
                "name": "延时消息"
            }, {
                "name": "切换状态传参",
                "url": "切换状态传参.obp"
            }, {
                "url": "changeState.json",
                "name": "状态切换"
            }, {
                "url": "canvas/chart1/project.json",
                "name": "散点图",
                "img": "static/images/20220427-1501.png"
            }, {
                "url": "canvas/jump.json",
                "name": "跳一跳",
                "img": "static/images/20220427-1452.png"
            }, {
                "url": "canvas/Canvas宽高.json",
                "name": "画板宽高",
                "img": "static/images/20220427-1503.png"
            }, {
                "url": "canvas/fillRect/fillRect.json",
                "name": "矩形动画",
                "img": "static/images/20220427-1502.png"
            }, {
                "url": "messageArgument/project.json",
                "name": "附加数据"
            }, {
                "url": "pingpong/project.json",
                "name": "状态机通信",
                // "img": "static/images/20220427-1457.png"
            }, {
                "url": "network/network1.json",
                "name": "多机消息模拟"
            
            }];
            let htmlstr = "";
            let imgstr = '';
            for (let i in txt) {
                if (txt[i]['img']) {
                    imgstr = '<img src="' + txt[i]['img'] + '" class="" height="225" width="100%">';
                } else {
                    imgstr = '<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title></title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">' + txt[i]['name'] + '</text></svg>';
                }
                htmlstr += '<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6" style="cursor:pointer;"><div class="card mb-3 shadow-sm" onmouseover="this.className=\'card mb-3 shadow-lg\';$(\'.id' + i + '\').addClass(\'bg-info text-white\');" onmouseout="this.className=\'card mb-3 shadow-sm\';$(\'.id' + i + '\').removeClass(\'bg-info text-white\');"><a target="_Blank" href="' + makeURL(txt[i].url) + '">' + imgstr + '</a><div class="card-body text-center id' + i + '" id=""><h5 class="card-text">' + txt[i]['name'] + '</h5></div></div> </div>';
            }
            $('.openblocklist').html(htmlstr);
            $(window).scroll(function() {
                var $scroll = $(document).scrollTop()
                if ($scroll > 30) {
                    $(".scrollTo").css('display', '');
                } else {
                    $(".scrollTo").css('display', 'none');
                }

            });
            $('.scrollTo').click(function() {
                scrollTo(0, 0);
            })
        })
    </script>
</head>

<body>
    <header>
        <div class="collapse bg-dark" id="navbarHeader">
            <div class="container">
                <div class="row">
                    <div class="col-sm-8 col-md-7 py-4">
                        <h4 class="text-white">关于OpenBlock</h4>
                        <p class="text-muted">
                        </p>
                    </div>
                    <div class="col-sm-4 offset-md-1 py-4">
                        <h4 class="text-white">联系我们</h4>
                        <ul class="list-unstyled">
                            <li><a href="#" class="text-white">wechat微信:duzc2dtw</a></li>
                            <li><a href="#" class="text-white">email:duzc2@163.com</a></li>
                            <li><a href="https://gitee.com/openblock/openblock/" target="_blank" class="text-white">项目主页</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="navbar navbar-dark bg-dark shadow-sm">
            <div class="container d-flex justify-content-between">
                <a href="#" class="navbar-brand d-flex align-items-center">
                    <img src="static/images/Open.png" height="40" />
                    <!--<strong>Album</strong>-->
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
            </div>
        </div>
    </header>

    <main role="main">
        <div class=" large-header">

            <section class="jumbotron text-center bg-light" style="margin-bottom:0px;padding-bottom:20px;background-color:#fff;opacity:0.9">
                <div class="container">
                    <h1>OpenBlock</h1>
                    <p class="lead text-muted">
                        OpenBlock是一种专为没有技术背景的非研发人员设计的图形化脚本语言。<br/> 以完全图形化的方式展现逻辑，并提供大量的图形方式展示逻辑内容，简单易学。
                        <br/> OpenBlock是面向业务的编程语言，提供了完整IDE支持。
                        <br/> OpenBlock编辑器原生使用HTML5技术构建，可部署于任何服务器并在任何主流浏览器中运行。
                        <br/> OpenBlock精简的指令集，支持多宿主语言、可跨平台部署；支持高并发、多线程;
                        <br/> 内部实现了类型系统、语法树、编译、字节码、运行时等现代语言的全部技术核心。
                        <br/> 面向状态机的编程范式，降低代码低耦合，拥有快速构建可扩、展易维护的业务模型的能力。</p>
                    <p>
                        <a href="../docs/" target="_blank" class="btn btn-info btn-lg"><span class="bi-book"></span> 打开文档</a>
                        <a href="https://gitee.com/openblock/openblock/" target="_blank" class="btn btn-info btn-lg"><span class="bi-house"></span> 项目主页</a>
                        <a href="../openblock/frontpage/" target="_blank" class="btn btn-primary btn-lg margin-right-lg"><span class="bi-layout-text-window-reverse"></span> 打开编辑器</a>
                    </p>
                </div>
            </section>

            <div class="album py-5 bg-light" style="opacity:0.9;padding-top: 0 !important;">
                <div class="container">
                    <div class="row openblocklist">
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="text-muted" style="margin-top:15px;">
        <div class="container">
            <p class="float-right">
                <!--<a href="https://www.bootcss.com/" target="_blank">本站基于bootstrap设计</a>-->
                本站基于bootstrap设计
            </p>
            <p>网页作者 :程慧敏、陈卓</p>
            <p>本站素材均来自网络，有版权异议请联系作者删除</p>
        </div>
    </footer>


    <script src="static/js/bootstrap.bundle.js"></script>

    <div class="position-fixed bottom-0 right-0 p-3 text-center" style="z-index: 5; right: 20px; bottom: 0;cursor:pointer;">
        <div class="scrollTo" style="display:none;">
            <h1 class="bi bi-arrow-up-circle text-info "></h1>
            <p class="text-muted">返回顶部</p>
        </div>

    </div>
</body>

</html>